@import "variables";

@font-face {
  font-family: '#{$icomoon-font-family}';
  src:  url('#{$icomoon-font-path}/#{$icomoon-font-family}.eot?jf948t');
  src:  url('#{$icomoon-font-path}/#{$icomoon-font-family}.eot?jf948t#iefix') format('embedded-opentype'),
    url('#{$icomoon-font-path}/#{$icomoon-font-family}.ttf?jf948t') format('truetype'),
    url('#{$icomoon-font-path}/#{$icomoon-font-family}.woff?jf948t') format('woff'),
    url('#{$icomoon-font-path}/#{$icomoon-font-family}.svg?jf948t##{$icomoon-font-family}') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="Wy-icon"], [class*=" Wy-icon"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: '#{$icomoon-font-family}' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.Wy-iconpause {
  &:before {
    content: $Wy-iconpause;     
    color: #fff;
  }
}
.Wy-iconplay {
  &:before {
    content: $Wy-iconplay;     
    color: #fff;
  }
}
.Wy-iconback {
  &:before {
    content: $Wy-iconback;     
    color: #fff;
  }
}
.Wy-iconforward {
  &:before {
    content: $Wy-iconforward;     
    color: #fff;
  }
}
.Wy-iconmenu {
  &:before {
    content: $Wy-iconmenu;     
    color: #717071;
  }
}
.Wy-iconmute {
  &:before {
    content: $Wy-iconmute;     
    color: #515151;
  }
}
.Wy-iconrepeat {
  &:before {
    content: $Wy-iconrepeat;     
    color: #8a8a8a;
  }
}
.Wy-iconvolume {
  &:before {
    content: $Wy-iconvolume;     
    color: #515151;
  }
}

